<template>
  <div v-if="isNoData" class="visual-no-data-container" :style="boxBgColor">
    <div class="countlessData_vChart">
      <p :title="noDataMessage" :style="getCssStyle({ fontSize: 14 })">{{ noDataMessage }}</p>
    </div>
  </div>
</template>

<script>
import { getCssStyle } from '@/utils/util';
export default {
  props: {
    isNoData: {
      type: Boolean,
      default: false,
    },
    boxBgColor: {
      type: Object,
      default: () => ({
        backgroundColor: 'rgba(255,255,255,0)',
      }),
    },
    noDataPromptType: {
      type: String,
      default: 'default',
    },
    noDataPrompt: {
      type: String,
      default: '',
    },
  },
  computed: {
    noDataMessage() {
      if (this.noDataPromptType === 'customPrompt') {
        return this.noDataPrompt;
      }
      if (this.noDataPromptType === 'noPrompt') {
        return '';
      }
      return this.$demoi18n('message.noData');
    },
  },
  methods: {
    getCssStyle,
  },
};
</script>

<style lang="less" scoped>
@import '../../../common/chart.less';
.visual-no-data-container {
  height: max-content;
  width: 100%;
  flex: 1;
  .countlessData_vChart {
    width: 100%;
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
  }
}
</style>
